<template>
<!-- pages/index/listQuery/listQuery.wxml -->
<view class="list-query">
  <form @submit="search">
    <view class="query-type" @tap="choiceType">
      <text class="name">查询项目</text>
      <view class="desc">
        <text>{{listName}}</text>
        <image src="/static/images/sys/right.png" class="error"></image>
      </view>
    </view>
    <view class="query-attr">
      <view v-for="(item, index) in attrList" :key="index" class="attr-item">
        <text class="name">{{item.attr_name}}</text>
        <input :placeholder="'请输入' + (item.attr_name === '期数' ? '期数，例如202001' : item.attr_name)" :name="item.attr_id" placeholder-class="input-placeholder">
      </view>
    </view>
    <button form-type="submit" class="submit">查询</button>
  </form>
  <subscribeMessaged v-if="modelId==1" :city="cityName" name="车牌摇号结果" :text="subscribeText" @subsuccess="subsuccess" tepId="Us5cSgjk6oFqj6UxBMaob7KNU1-WWHfWS86idTsfNHw">
            <button class="dingyue submit" :disabled="subscribeText=='已订阅'? true:false">{{subscribeText=="已订阅"?'已订阅':'订阅'+cityName+'摇号结果'}}</button>
          </subscribeMessaged>

</view>
</template>

<script>
// pages/index/listQuery/listQuery.js
const util = require("../../../../utils/util.js");
const app = getApp();
import WxValidate from '../../../../utils/WxValidate';
let modelId;
let citycode;
let cityName;
let toggleCollection = true;
import subscribeMessaged from "../../../../component/subscribeMessaged/subscribeMessaged";

export default {
  data() {
    return {
      attrList: [],
      listName: "",
      isNaviBack: false,
      modelId: '',
      scroll: false,
      cityName: '深圳',
      subscribeText: '订阅',
      modelId: 1,
      cityCode: ""
    };
  },

  components: {
    subscribeMessaged
  },
  props: {},
  onLoad: function (options) {
    toggleCollection = true;
    cityName = options.cityName ? options.cityName : uni.getStorageSync("city");
    citycode = options.city ? decodeURIComponent(options.city) : uni.getStorageSync("citycode");
    modelId = options.modelId;
    this.setData({
      cityName,
      cityCode: citycode,
      modelId
    });

    if (modelId == 1) {
      uni.redirectTo({
        url: `/pages/tools/yaohaojieguo/yaohaojieguo?city=${this.cityName}`
      });
      return;
    }

    util.getUrl(app.globalData.url).then(res => {
      if (modelId) {
        util.bstrequest('listQuery.php', {
          ac: 'model',
          model_id: modelId
        }, 'POST').then(res => {
          this.setData({
            attrList: res.data.data,
            listName: res.data.data[0].name,
            modelId
          });
          this.initValidate();
        });

        if (modelId == 1) {
          util.checkSubscribe("车牌摇号结果", this.cityName).then(result => this.setData({
            subscribeText: result ? '已订阅' : '订阅'
          }));
        }
      } else {
        let $getInitializationInfo = {
          ac: 'type',
          citycode
        };
        util.bstrequest('listQuery.php', $getInitializationInfo, 'POST').then(res => {
          if (res.data) {
            let initInfo = JSON.parse(JSON.stringify(res.data));
            if (initInfo.type) modelId = initInfo.type[0].model_id;
            this.setData({
              attrList: initInfo.attr,
              listName: initInfo.type[0].name,
              modelId
            });
          } // this.initValidate();

        });
      }
    });
  },

  onShow() {
    // 显示选择的模型查询属性
    if (this.isNaviBack) {
      let $getAttrList = {
        ac: "model",
        model_id: this.modelId
      };
      util.bstrequest('listQuery.php', $getAttrList, 'POST').then(res => {
        this.setData({
          attrList: res.data.data
        }); // this.initValidate();
      });
    }
  },

  onShareAppMessage: function () {
    return {
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg",
      path: `pages/tools/listQuery/index/index?citycode=${this.citycode}&modelId=${this.modelId}&cityName=${this.cityName}`,
      title: this.cityName + '车牌摇号结果查询'
    };
  },
  methods: {
    // 订阅成功
    subsuccess() {
      this.setData({
        subscribeText: "已订阅"
      });
      uni.showToast({
        title: '订阅成功，待结果公布后会有提醒',
        icon: 'none'
      });
    },

    choiceType(e) {
      uni.redirectTo({
        url: `../list/list?modelId=${modelId}&citycode=${citycode}&cityName=${this.cityName}`
      });
    },

    showMoadal(error) {
      uni.showModal({
        title: '提示',
        content: error.msg,
        showCancle: false
      });
    },

    initValidate() {
      const rule = {};
      const message = {}; // 循环属性，添加验证规则

      if (this.attrList) {
        this.attrList.forEach(v => {
          rule[v.attr_id] = {
            required: true
          };
          message[v.attr_id] = {
            required: `请输入${v.attr_name}`
          };
        });
      } //  创建实例对象


      this.WxValidate = new WxValidate(rule, message);
    },

    search(e) {
      if (this.WxValidate) {
        if (!this.WxValidate.checkForm(e.detail.value)) {
          const error = this.WxValidate.errorList[0];
          this.showMoadal(error);
          return false;
        } else uni.navigateTo({
          url: `../result/result?attr=${JSON.stringify(e.detail.value)}&modelId=${this.modelId}&cityName=${cityName}`
        });
      } else {
        this.initValidate();
        this.search(e);
      }
    },

    onPageScroll() {
      if (toggleCollection) {
        this.setData({
          scroll: true
        });
        toggleCollection = false;
      }
    },

    closeCollection() {
      toggleCollection = false;
    },

    openCollection() {
      toggleCollection = true;
    }

  }
};
</script>
<style>
/* pages/index/listQuery/listQuery.wxss */

page {
    background-color: #F9F9F9;
  }
  
  input {
      width: 60%;
    text-align: right;
  }
  
  .list-query {
    font-size: 28rpx;
  }
  
  .query-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    margin: 12rpx 0;
    padding: 32rpx 40rpx;
  }
  
  .name {
    color: #000000;
    margin-left: 2rpx;
  }
  
  .desc {
    color: #7E7E7E;
  }
  
  .error {
    width: 14rpx;
    height: 25rpx;
    margin-left: 26rpx;
  }
  
  .query-attr {
    background-color: #ffffff;
  }
  
  .attr-item {
    display: flex;
    justify-content: space-between;
    padding: 32rpx 0;
    margin: 0 40rpx;
    border-bottom: 2rpx solid #F7F7F7;
  }
  
  .input-placeholder {
    text-align: right;
    color: #7E7E7E;
  }
  
  .submit {
    margin: 0 40rpx;
    padding: 5rpx 0;
    margin-top: 150rpx;
    color: #ffffff;
    font-size: 28rpx;
    background: linear-gradient(to right, #FFAA00, #FF6600);
    border-radius: 10rpx;
  }

.dingyue{
  margin-top: 80rpx;
  background: #1CD66C;

}
</style>